<template>
  <div v-if="show">
    <!-- 个人页面 -->
    <div class="top">
      <img
        src=""
        alt=""
      />
      <div class="deng" @click="change()">
        <p>{{ username }}</p>
        <van-icon name="arrow" class="van" v-if="bool" />
        <van-icon name="cross" class="van" v-if="bool2" @click.stop="clear()" />
      </div>
    </div>
    <ul>
      <van-grid :column-num="3">
        <van-grid-item icon="label-o" text="我的订单" @click="ti()" />
        <van-grid-item icon="bill-o" text="优惠券" @click="ti()" />
        <van-grid-item icon="goods-collect-o" text="礼品卡" @click="ti()" />
        <van-grid-item icon="star-o" text="我的收藏" @click="ti()" />
        <van-grid-item icon="flag-o" text="我的足迹" @click="ti()" />
        <van-grid-item icon="manager-o" text="会员福利" @click="ti()" />
        <van-grid-item icon="location-o" text="地址管理" @click="ti()" />
        <van-grid-item icon="warn-o" text="账号安全" @click="ti()" />
        <van-grid-item icon="service-o" text="联系客户" @click="ti()" />
        <van-grid-item icon="photo-o" text="帮助中心" @click="ti()" />
        <van-grid-item icon="photo-o" text="意见反馈" @click="ti()" />
      </van-grid>
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
import { Dialog } from 'vant';
Vue.use(Dialog);
Vue.use(Toast);

export default {
  data() {
    return {
      username: "点击登录",
      bool: true,
      bool2: false,
      show:true
    };
  },
  methods: {
    //跳转路由
    change() {
      this.$router.push("/login");
    },
    //弹窗
    ti() {
      Toast("该功能未开发");
    },
    //退出
    clear() {
      Dialog.confirm({
        title: "退出账号确认",
        message: "是否要退出当前的账号",
      })
        .then(() => {
          window.sessionStorage.clear();
          this.$router.push("/user")
          this.$router.go(0)
        })
        .catch(() => {
          // on cancel
        });
      
    },
  },
  created() {
    let token = window.sessionStorage.getItem("token");
    // console.log(token);
    if (token) {
      this.username = "用户名1478523";
      this.bool = false
      this.bool2 = true
    }
  },
 
};
</script >

<style lang="less" scoped>
.top {
  height: 1.1rem;
  background-color: #333333;
  padding: 0.1rem;
  box-sizing: border-box;
  display: flex;
  line-height: 1rem;
  img {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.4rem;
    margin-top: 0.05rem;
  }
  .cell {
    background-color: #333333;
  }
  .deng {
    display: flex;
    justify-content: space-between;
    width: 100%;
    p {
      color: #fff;
      margin-left: 0.1rem;
      line-height: 0.8rem;
    }
    .van {
      line-height: 0.8rem;
      color: #fff;
    }
  }
  .popup {
    width: 3.5rem;
  }
}
</style>